
import { Component, Vue } from 'vue-property-decorator';
import { VNode } from 'vue';
import { Form, Input, Checkbox  } from 'ant-design-vue';
import '@/style/formBox.less';
const antComponent = {
  'a-input': Input,
  'a-form': Form,
  'a-form-item': Form.Item,
 'a-input-password': Input.Password,
 'a-checkbox': Checkbox
};
const Add = () => {
  return <div>111</div>;
};
@Component({
  components: antComponent,
})
export default class FromBox extends Vue {
  name: string = 'FormBOx';
  form: any;
  handleSubmit(e: any): void {
    e.preventDefault();
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  beforeCreate() {
    this.form = this.$form.createForm(this, {});
  }
  protected render(): VNode {
    return <a-form
            class ='form-box'
            onSubmit={this.handleSubmit}
            form={this.form}
            labelAlign={'left'}
            >
             <a-form-item >
                <span>登录界面</span>
            </a-form-item>
            <a-form-item
              name={'userName'}
              label={'姓名'}
              labelCol={{span: 3 }}
              wrapperCol={{span: 21 }}
            >
              <a-input
                v-decorator = {['userName', {rules: [{ required: true, message: '请输入姓名' }]}]}
                placeholder='请输入姓名'
              >
                <a-icon slot='prefix' type='user' style='color:rgba(0,0,0,.25)' />
              </a-input>
            </a-form-item>
            <a-form-item
             name={'userName'}
             label={'密码'}
             labelCol={{span: 3 }}
             wrapperCol={{span: 21 }}
            >
            <a-input-password
              v-decorator = {['password', {rules: [{ required: true, message: '请输入密码' }]}]}
              placeholder='请输入密码'
            >
              <a-icon slot='prefix' type='lock' style='color:rgba(0,0,0,.25)' />
            </a-input-password>
          </a-form-item>
          <a-form-item>
             <a-checkbox class='check-left'>
              Remember me
              </a-checkbox>
              <a class='login-form-forgot' href=''>
                Forgot password
              </a>
            <a-button type='primary' html-type='submit'  class='login-button'>
              Log in
            </a-button>
          </a-form-item>
    </a-form>;
  }
}